<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NAS智能导航</title>
    <!-- Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="style.css">
    <style>
        /* 定义圆形 LOGO 的样式 */
        .logo {
            text-align: center;
            margin-bottom: 20px;
        }
        .logo img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        }
        /* 定义底部 ICP 信息的样式 */
        .icp-info {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 控制栏 -->
        <div class="control-bar">
            <div class="theme-switch">
                <button id="toggleTheme">
                    <i class="fas fa-moon"></i>
                    <span>深色模式</span>
                </button>
            </div>
            <div class="mode-switch">
                <button id="toggleMode">
                    <i class="fas fa-network-wired"></i>
                    <span class="btn-text">检测中...</span>
                    <div class="loading"></div>
                </button>
            </div>
        </div>

        <!-- 圆形 LOGO 图标 -->
        <div class="logo">
            <!-- 请将这里的 touxiang.jpg 替换为你的实际 LOGO 图片文件名 -->
            <a href="https://bb.mdbreed.com/blog">
                <img src="touxiang.jpg" alt="网站 LOGO">
            </a>
        </div>

        <!-- 双搜索引擎 -->
        <div class="search-box">
            <form id="searchForm">
                <div class="search-header">
                    <select id="engineSelect">
                        <option value="baidu">百度搜索</option>
                        <option value="360">360搜索</option>
                    </select>
                    <div class="search-input">
                        <input type="text" id="searchKeyword" 
                               placeholder="输入搜索关键词..." 
                               required>
                        <button type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 导航内容容器 -->
        <div id="navContainer"></div>
    </div>

    <!-- 底部 ICP 信息 -->
    <div class="icp-info">
        <!-- 请将这里的 [你的 ICP 备案号] 替换为你的实际 ICP 备案号 -->
        <a href="https://beian.miit.gov.cn/" target="_blank">[123456789]</a>
    </div>

    <!-- 添加随机查询参数以避免缓存 -->
    <script src="script.js?v=<?php echo uniqid(); ?>"></script>
</body>
</html>